<template>
    <div class="pages roleDetails">

        <div class="form">
            <div class="bar" v-if="pageState == 1 || pageState == 2">
                <div class="title mustStart">角色名称:</div>
                <div class="input">
                    <el-input class="add-input" maxlength="16" placeholder="请输入16位以内的角色名称" size='small' v-model="updateData.roleName"></el-input>
                </div>
            </div>
            <div class="bar" v-else>
                <div class="title">角色名称:</div>
                <div class="content" v-text="dataList.roleName"></div>
            </div>
            <div class="bar">
                <div class="title">角色描述:</div>
                <div class="input" v-if="pageState == 1 || pageState == 2">
                    <el-input type="textarea" maxlength="100" autosize placeholder="请输入内容" v-model="updateData.remark"></el-input>
                    <div class="textareaLength">({{updateData.remark.length}}/100)</div>
                </div>
                <div class="content" v-else v-text="dataList.remark"></div>
            </div>
            <div class="bar" v-if="pageState == 0">
                <div class="title">创建时间:</div>
                <div class="content" v-text="trunTime(dataList.createTime)"></div>
            </div>
            <div class="bar" v-if="pageState == 0">
                <div class="title">修改时间:</div>
                <div class="content" v-text="trunTime(dataList.updateTime)"></div>
            </div>
            <div class="bar">
                <div class="title">分配权限:</div>
                <div class="tree">
                    <el-tree v-if="pageState == 1 || pageState == 3" :data="treeDataUpdate" show-checkbox default-expand-all node-key="id" ref="treeUpdate" highlight-current :props="defaultProps"></el-tree>
                    <el-tree v-else :data="treeData" default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" :filter-node-method="filterNode"></el-tree>
                </div>
            </div>
        </div>
        <template v-if="dataList.isDistribution != 1">
            <div class="operation" v-if="pageState == 0">
                <el-button type="primary" @click="update(2)" v-if="setRole('修改')">修改角色基础信息</el-button>
                <el-button type="primary" @click="update(3)" v-if='setRole("角色分配功能")'>角色功能分配</el-button>
            </div>
            <div class="operation" v-else>
                <el-button type="primary" v-if="pageState != 1" @click="cancel()">取消</el-button>
                <el-button type="primary" @click="submit()">保存</el-button>
            </div>
        </template>
    </div>
</template>
<script>
import util from '@/util'
import { mapState } from "vuex";
import {findAuthByMerchantId, saveOrUpdateRoleInfo, saveUpdateRoleTree, findRoleDetailsInfo} from '@/api'
export default {
    data () {
        return {
            roleId: util.getQuery().roleId,
            pageState: 0, // 0 => 查看, 1 => 新增, 2 => 修改基础信息, 3 => 角色分配功能
            dataList: {},
            updateData: {remark:''},
            treeData: null,
            selectedData: [], // 请求回来的已选中数组
            treeDataUpdate: null,
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    computed: mapState(["power", "merchantId"]),
    mounted () {
        if (util.getQuery().handle === 'see') {
            this.pageState = 0
            this.getData(util.getQuery().roleId)
        }else{
            this.pageState = 1
            this.getTree()
        }
    },
    methods: {
        setRole (key) {
            return util.selectTitle(this.power, key)
        },
        getData (roulId) {
            findRoleDetailsInfo({ roleId: roulId, merchantId: this.merchantId }).then(res => {
                if (res.code == 200) {
                    this.dataList = res.data
                    this.updateData = JSON.parse(JSON.stringify(res.data));
                    this.treeData = res.data.authList
                    this.treeDataUpdate = JSON.parse(JSON.stringify(res.data.authList));
                    this.$nextTick(() => {
                        this.selectedData = []
                        this.$refs.tree.filter();
                    })
                }
            })
        },
        getTree () {
            findAuthByMerchantId({
                merchantId: this.merchantId
            }).then(res => {
                if (res.code == 200) {
                    this.treeDataUpdate = res.data.authList
                }
            })
        },
        filterNode(value, data, node) {
            if (data.state == '1') {
                this.selectedData.push(data)
                for (let i = 0; i < this.selectedData.length; i++) {
                    if (data.pid == this.selectedData[i].id) {
                        this.selectedData.splice(i, 1)
                    }
                }
                return true
            }else{
                return false
            }
        },
        setCheckedNodes() {
            this.$refs.treeUpdate.setCheckedNodes(this.selectedData);
        },
        trunTime (cellValue) {
            return util.foryear(cellValue)+ ' ' +util.fortime(cellValue)
        },
        update (val) {
            this.pageState = val
            if (val == 2) {
                this.updateData.roleName = this.dataList.roleName
                this.updateData.remark = this.dataList.remark
            }else if (val == 3) {
                this.$nextTick(() => {
                    this.setCheckedNodes()
                })
            }
        },
        submit () {
            switch (this.pageState) {
                case 1:
                    saveOrUpdateRoleInfo({
                        roleId: '',
                        merchantId: this.merchantId,
                        roleName: this.updateData.roleName,
                        remark: this.updateData.remark
                    }).then(res => {
                        if (res.code == 200) {
                            this.roleId = res.data.roleId
                            let arr = this.$refs.treeUpdate.getHalfCheckedKeys()
                            let arr2 = this.$refs.treeUpdate.getCheckedKeys()
                            let arr3 = arr.concat(arr2).join(',')
                            this.updateRole(res.data.roleId, arr3)
                            this.$router.replace({
                                path: '/operate-management/role-management/role-details',
                                query: {
                                    handle: 'see',
                                    roleId: res.data.roleId
                                }
                            })
                        }
                    })
                    break;

                case 2:
                    saveOrUpdateRoleInfo({
                        roleId: util.getQuery().roleId,
                        merchantId: this.merchantId,
                        roleName: this.updateData.roleName,
                        remark: this.updateData.remark
                    }).then(res => {
                        if (res.code == 200) {
                            this.pageState = 0
                            this.$message({
                                message: '修改角色基础信息成功',
                                type: 'success'
                            });
                            this.getData(util.getQuery().roleId)
                        }
                    })
                    break;

                case 3:
                    let arr = this.$refs.treeUpdate.getHalfCheckedKeys()
                    let arr2 = this.$refs.treeUpdate.getCheckedKeys()
                    let arr3 = arr.concat(arr2).join(',')
                    this.updateRole(util.getQuery().roleId, arr3)
                    break;

                default:
                    break;
            }
        },
        updateRole (roleId, authIds) {
            saveUpdateRoleTree({
                roleId: roleId,
                authIds: authIds
            }).then(res => {
                if (res.code == 200) {
                    this.pageState = 0
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.getData(roleId)
                }
            })
        },
        cancel () {
            this.pageState = 0
            this.$nextTick(() => {
                this.selectedData = []
                this.$refs.tree.filter();
            })
        }
    },
}
</script>
<style lang="less" scoped>
.roleDetails{
    padding: 10px;
    background-color: #ffffff;
    overflow: hidden;
    .form{
        .bar{
            font-size: 14px;
            position: relative;
            display: flex;
            padding: 15px 0;
            .title{
                text-align: left;
                width: 200px;
                text-indent: 30px;
            }
            .content{
                text-indent: 20px;
            }
            .tabel{
                width: 70%;
            }
            .switch{
                padding-left: 20px;
            }
            .input{
                width: 30%;
                padding-left: 20px;
            }
        }
    }
    .operation{
        margin-top: 20px;
        float: left;
        margin-left: 200px;
    }
    .textareaLength{
        float: right;
        color: #ccc;
        margin-top: 10px;
    }
}
</style>

